import React, { useState } from 'react'
import { Button, Tooltip } from 'antd'
import { SettingOutlined } from '@ant-design/icons'
import ThemeSettings from '@/components/ThemeSettings'
import './index.less'

const ThemeSettingsButton: React.FC = () => {
  const [visible, setVisible] = useState(false)

  const handleOpen = () => {
    setVisible(true)
  }

  const handleClose = () => {
    setVisible(false)
  }

  return (
    <>
      <Tooltip title="主题设置" placement="left">
        <Button
          type="primary"
          shape="circle"
          size="large"
          icon={<SettingOutlined />}
          className="theme-settings-button"
          onClick={handleOpen}
        />
      </Tooltip>
      
      <ThemeSettings visible={visible} onClose={handleClose} />
    </>
  )
}

export default ThemeSettingsButton
